<template>
	<!-- 患者评论列表组件 -->
	<view>
		<view class="tag">
			<view class="tag-item" v-for="(item, index) in tagList" :key="index">
				{{item}}
			</view>
		</view>
		<view style="clear:both"></view>
		<view class="comment">
			<view class="comment-item" v-for="(item, index) in commentList" :key="index">
				<view class="title">
					<view class="left">
						<image :src="item.imgUrl"></image>
						<text>{{item.userName}}</text>
					</view>
					<view class="right">{{item.createTime}}</view>
				</view>
				<view class="commnet-content">
					{{item.content}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "comment",
		data() {
			return {};
		},
		props: {
		    tagList: Array,
			commentList: Array
		},
	}
</script>

<style lang="scss" scoped>
	.tag {
		padding: 10px;

		.tag-item {
			float: left;
			margin-right: 5px;
			margin-bottom: 5px;
			padding: 4px 5px;
			border: 1px solid #f2f2f2;
			border-radius: 14px;
			font-size: 12px;
			color: #666;
		}
	}

	.comment {
		.comment-item {
			border-bottom: 1px solid #f2f2f2;
			padding-bottom: 10px;
		}

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 8px 15px;
			font-size: 13px;

			.left {
				display: flex;
				flex: 1;
				align-items: center;

				>image {
					width: 30px;
					height: 30px;
					border-radius: 50%;
				}

				>text {
					color: #666;
					margin-left: 10px;
				}
			}

			.right {
				padding: 5px;
				color: #999;
			}
		}

		.commnet-content {
			padding: 0 15px;
			font-size: 15px;
			color: #333;
			line-height: 25px;
		}

	}
</style>